/** ============== **/
/** web layout */
/** ============== **/
/* #ifdef XT_PC */
.x-layout-page {
  overflow: hidden;
  background-color: $uni-bg-color;
	width: calc(100vw - var(--window-left) );
	max-width: calc(100vw - var(--window-left) );
  height: calc( 100vh - var(--top-window-height) );
}
.x-layout-page-embed {
  overflow: hidden;
  background-color: $uni-bg-color;
	width: 100%;
	max-width: 100%;
  height: 100%;
	flex: 1;
}
.x-layout-page-max-width {
	max-width: calc(100vw - var(--window-left) );
}
.x-layout-card {
  border-radius: $uni-border-radius-base;
  overflow-y: auto;
  overflow-x: auto;
  background-color: $uni-white;
}
.x-layout-tabs-full {
  display: flex;
  flex-direction: column;

  ::v-deep .el-tabs__content {
    flex: 1;
    padding-bottom: $uni-spacing-base;
  }
}
.x-layout-query {
  margin-left: -$uni-spacing-base/2;
  margin-right: -$uni-spacing-base/2;
  ::v-deep .el-col {
    margin-bottom: $uni-spacing-base;
    padding-left: $uni-spacing-base/2;
    padding-right: $uni-spacing-base/2;
  }

	::v-deep .el-col .el-select, ::v-deep .el-col .el-input{
		width: 100%;
	}
}
.x-layout-pagination {
  margin-top: $uni-spacing-base;
  text-align: right;
}
.x-layout-descriptions {
	// ::v-deep .el-descriptions-item__label {
	// 	display: flex;
	// 	align-items: center;
	// }
	::v-deep .el-descriptions-item__content .el-select, ::v-deep .el-descriptions-item__content .el-input{
		width: 100%;
	}
}
/* #endif */


.x-card {
	padding: $uni-spacing-base;
	background: $uni-white;
	border-radius: $uni-border-radius-lg;
	overflow: hidden;
}


.table {
  display: table;
  width: 100%;
  /* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，解决相邻单元格边框未合并导致有些边框变粗的视觉效果 */
  border-collapse: collapse;
  overflow-x: hidden;
}
.table-tr {
  display: table-row;
  width: 100%;
  // height: 200rpx;
	border-bottom: 0.5px solid $uni-border-color;
}
.table-th {
  display: table-cell;
  // font-weight: bold;
  // border: 1px solid black;
  // text-align: center;
  vertical-align: middle;
	padding: $uni-spacing-base $uni-spacing-sm;
	color: $uni-text-color-grey;
  // background-color: #ccc;
}
.table-td {
  display: table-cell;
  // border: 1px solid black;
  // text-align: center;
  vertical-align: middle;
	padding: $uni-spacing-base $uni-spacing-sm;
}


/** ============== **/
/** 宽高 */
/** ============== **/
.x-w-100v{ width:100vw }
.x-h-100v{ height:100vh }
/* #ifndef APP-NVUE */
.x-w-100{ width:100% }
.x-h-100{ height:100% }
.x-h-auto{ height: auto }
.x-h-min-100v{ min-height: calc( 100vh - var(--window-top) - var(--window-bottom)); }
/* #endif */

/** ============== **/
/** 颜色 */
/** ============== **/
$x-colors:(
	white: $uni-white,
	black: $uni-black,
	transparent:$uni-transparent,

	primary: $uni-color-primary,
	success: $uni-color-success,
	warning: $uni-color-warning,
	error: $uni-color-error,
	info: $uni-color-info,

	text-main: $uni-text-color,
	text-light: $uni-text-color-grey,
	text-placeholder: $uni-text-color-placeholder,

	bg: $uni-bg-color,

	border: $uni-border-color
) !default;
@each $key, $child in $x-colors {
	.x-#{"" + $key} {
		color: $child;
	}
	.x-#{"" + $key}-bg {
		background-color: $child;
	}
}
.x-shadow-sm {
	box-shadow: $uni-shadow-sm;
}
.x-shadow-base {
	box-shadow: $uni-shadow-base;
}
.x-shadow-lg {
	box-shadow: $uni-shadow-lg;
}
.x-mask {
	background-color: $uni-bg-color-mask;
}
.x-none-bg {
	background: none;
}
.bg-primary-light {
  background-color: scale-color($u-primary, $lightness: +78%);;
}


/** ============== **/
/** 文字大小 */
/** ============== **/
@each $k,$v in (
  sm: $uni-font-size-sm,
  base: $uni-font-size-base,
  lg: $uni-font-size-lg,
) {
  .x-fs-#{$k} { font-size: $v; }
}

// 文字左边小柱子
.x-line-bar {
  width: 6rpx;
  height: 1em;
  background: $uni-color-primary;
  margin-right: 10rpx;
}
.x-line-bar-placeholder {
  width: 6rpx;
  height: 1em;
  background: transparent;
  margin-right: 10rpx;
}

// require
.x-require:before {
	content: "*";
	color: $uni-color-error;
}


/** ============== **/
/* 字体粗度 */
/** ============== **/
@each $k,$v in (
  base: normal,
  lg: 700
) {
  .x-fw-#{$k} { font-weight: $v; }
}

/** ============== **/
/* position */
/** ============== **/
.x-position-relative { position: relative; }
.x-position-absolute { position: absolute; }
.x-position-fixed { position: fixed; }
.x-position-top { left: 0; right: 0; top: 0; }
.x-position-bottom { left: 0; right: 0; bottom: 0;}
.x-position-top-left { left: 0; top: 0;}
.x-position-bottom-right { right: 0; bottom: 0;}
.x-position-corner { right: 0; top: 0;}

/** ============== **/
/* flex */
/** ============== **/
/* #ifndef APP-NVUE */
.x-display-block { display: block; }
.x-inline-display-block { display: inline-block; }
/* #endif */
.x-flexp-jc{ display: flex;justify-content: center;flex-direction: row; }
.x-flexp-ai{ display: flex;align-items:center;flex-direction: row; }
.x-flexp-jcai{ display: flex;justify-content: center;align-items:center;flex-direction: row; }
/* #ifndef APP-NVUE */
[nvue] .x-flexp-jcai{ display: flex;justify-content: center;align-items:center;flex-direction: row; }
/* #endif */
.x-flexp-column{ display: flex;flex-direction: column; }
.x-flexp-row{ display: flex;flex-direction: row; }
.x-flexp-column-stretch{ display: flex;flex-direction: column; align-items: stretch;}
.x-flexp-row-stretch{ display: flex;flex-direction: row; align-items: stretch;}
.x-flexp-row-between-center{ display: flex;flex-direction: row; justify-content:space-between; align-items: center; }
/* #ifndef APP-NVUE */
[nvue] .x-flexp-row{ display: flex;flex-direction: row; }
/* #endif */
.x-flexp-column{ display: flex; flex-direction: column; }

.x-flex{ display: flex; flex-direction: row; }
/* #ifndef APP-NVUE */
.x-flex-inline{ display: inline-flex; flex-direction: row; }
/* #endif */

.x-flex-row{ flex-direction: row }
/* #ifndef APP-NVUE */
[nvue] .x-flex-row{ flex-direction: row }
/* #endif */
.x-flex-row-reverse{ flex-direction: row-reverse }
.x-flex-column{ flex-direction: column; }
.x-flex-column-reverse{ flex-direction: column-reverse; }

.x-flexp-row-reverse{ display: flex; flex-direction: row-reverse }
.x-flexp-column{ display: flex; flex-direction: column; }
.x-flexp-column-reverse{ display: flex; flex-direction: column-reverse; }

.x-flex-1{ flex: 1 !important; }
/* #ifndef APP-NVUE */
.x-flex-none{ flex: none !important; }
.x-flex-shrink{ flex-shrink: 0 !important; }
/* #endif */
.x-flex-wrap{ flex-wrap: wrap !important; }
.x-flex-nowrap{ flex-wrap: nowrap !important; }

/* #ifndef APP-NVUE */
.x-flex-self-start{align-self: flex-start;}
.x-flex-self-center{align-self: center;}
.x-flex-self-end{align-self: flex-end;}
.x-flex-self-stretch{align-self: stretch;}
/* #endif */
.x-flex-ai-start{ align-items:flex-start; }
.x-flex-ai-end{ align-items:flex-end; }
.x-flex-ai-center { align-items:center; }
.x-flex-ai-stretch { align-items:stretch; }
.x-flex-jc-between{ justify-content:space-between; }
.x-flex-jc-around{ justify-content:space-around; }
.x-flex-jc-start { justify-content: flex-start; }
.x-flex-jc-center { justify-content: center; }
.x-flex-jc-end  {justify-content: flex-end; }

/* text */
.x-text-line-through { text-decoration:line-through; }
.x-text-underline { text-decoration:underline; }
/* #ifndef APP-NVUE */
.x-text-white-space { white-space: nowrap; }
/* #endif */
.x-text-align{ text-align: center; }
.x-text-align-left{ text-align: left; }
.x-text-align-right{ text-align: right; }

/*鼠标变小手*/
.x-cursor-pointer { cursor:pointer; }

/* overflow */
.x-overflow-hidden { overflow: hidden; }
.x-overflow-x-hidden { overflow-x: hidden; }
.x-overflow-y-hidden { overflow-y: hidden; }
/* #ifndef APP-NVUE */
.x-overflow-auto { overflow: auto; }
.x-overflow-x-auto { overflow-x: auto; }
.x-overflow-y-auto { overflow-y: auto; }
/* #endif */


/** ============== **/
/* line height */
/** ============== **/
.x-line-height-0 { line-height: 0; }
.x-line-height-1 { line-height: 1; }


/** ============== **/
/* outline */
/** ============== **/
.x-outling-none {
	outline: none;
	-webkit-appearance: none;
}


/** ============== **/
/* lines */
/** ============== **/
@for $i from 1 through 5 {
	.x-line-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		/* #endif */
		
		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == 1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}
 
/** ============== **/
/** spacing **/
/** ============== **/
@mixin get-styles-direction-fn($key,$direction,$val) {
	@if $direction == all {
		#{$key}: #{$val}
	} @else {
		#{$key}-#{$direction}: #{$val}
	}
}
@mixin get-styles-direction($direction,$key,$val){
	@if $direction == a {
		@include get-styles-direction-fn($key, all, $val);
	} 
	@if $direction == x {
		@include get-styles-direction-fn($key, left, $val);
		@include get-styles-direction-fn($key, right, $val);
	} 
	@if $direction == y {
		@include get-styles-direction-fn($key, top, $val);
		@include get-styles-direction-fn($key, bottom, $val);
	} 
	@if $direction == t {
		@include get-styles-direction-fn($key, top, $val);
	} 
	@if $direction == r {
		@include get-styles-direction-fn($key, right, $val);
	} 
	@if $direction == b {
		@include get-styles-direction-fn($key, bottom, $val);
	} 
	@if $direction == l {
		@include get-styles-direction-fn($key, left, $val);
	}
}
@each $orientation in m,p {
	$space: margin;
	@if $orientation == m {
		$space: margin;
	} @else {
		$space: padding;
	}
	
	@each $direction in a, x, y, t, r, b, l {
		.x-#{$orientation}#{$direction}-sm { 
			@include  get-styles-direction($direction, $space, $uni-spacing-sm);
		} 
		.x-#{$orientation}#{$direction} { 
			@include  get-styles-direction($direction, $space, $uni-spacing-base);
		} 
		.x-#{$orientation}#{$direction}-lg { 
			@include  get-styles-direction($direction, $space, $uni-spacing-lg);
		}
		.x-#{$orientation}#{$direction}-0 { 
			@include  get-styles-direction($direction, $space, 0);
		}
	}
}
 
/** ============== **/
/** border */
/** ============== **/
$x-borders: (
	none: none,
	null: $uni-border-color,
	primary: $uni-color-primary,
	warning: $uni-color-warning,
	info: $uni-color-info,
	error: $uni-color-error,
	success: $uni-color-success
) !default;
@mixin border($d, $v){
	@if $v != none {
		$v: 0.5px solid #{$v};
	}
	@if $d == a {
		border: $v;
	}@else if $d == x {
		border-left: $v;
		border-right: $v;
	}@else if $d == y {
		border-top: $v;
		border-bottom: $v;
	}@else if $d == l {
		border-left: $v;
	}@else if $d == r {
		border-right: $v;
	}@else if $d == t {
		border-top: $v;
	}@else if $d == b {
		border-bottom: $v;
	}
}
@each $direction in a, x, y, t, r, b, l {
	@each $key, $child in $x-borders {
		@if($key){
			.x-b#{"" + $direction}-#{"" + $key} {
				@include border($direction,$child)
			}
		}@else{
			.x-b#{$direction} {
				@include border($direction,$child)
			}
		}
	}
}

.x-border-box{
	box-sizing: border-box;
}


/** ============== **/
/** radius */
/** ============== **/
$x-radius: (
	0: 0,
	sm: $uni-border-radius-sm,
	null: $uni-border-radius-base,
	lg: $uni-border-radius-lg,
	'pill': 9999px,
	'circle': 50%
) !default;
@mixin radius($d, $v){
	@if $d == a {
		border-radius: $v;
	}@else if $d == t {
			border-top-left-radius:$v;
			border-top-right-radius:$v;
	}@else if $d == r {
			border-top-right-radius:$v;
			border-bottom-right-radius:$v;
	}@else if $d == b {
			border-bottom-left-radius:$v;
			border-bottom-right-radius:$v;
	}@else if $d == l {
			border-top-left-radius:$v;
			border-bottom-left-radius:$v;
	}@else if $d == tl {
			border-top-left-radius:$v;
	}@else if $d == tr {
			border-top-right-radius:$v;
	}@else if $d == br {
			border-bottom-right-radius:$v;
	}@else if $d == bl {
			border-bottom-left-radius:$v;
	}
}
@each $direction in a, t, r, b, l,tl, tr, br, bl {
	@each $key, $child in $x-radius {
		@if($key){
			.x-r#{"" + $direction}-#{"" + $key} {
				@include radius($direction,$child)
			}
		}@else{
			.x-r#{$direction} {
				@include radius($direction,$child)
			}
		}
	}
}
